<template>
	<view class="categoryContainer">
		<!-- 搜索框区域 -->
		<view class="searchBar" >
			<view class="innerBar">
				<image class="search iconfont icon-sousuo"></image>
				<text class="content">请输入搜索关键字</text>
			</view>
		</view>
		
		<view class="main">
		<!-- 左侧导航栏区域  -->
		<view class="leftnav">
			<view class="navItem" :class="{active:currentIndex === index}"
			@click="currentIndex = index "
			v-for="(nav,index) in categoryList"
			:key="nav.classifyId">
			 {{nav.classifyName}}
			</view>
	
		</view>
		<!-- 右侧布局 -->
		<view class="rightWrap">
			<view class="bannerWrap">
				<image  v-for="(banner,index) in currentCateList.banner" :key="banner.url"
				class="bannerImg" :src="banner.image" mode=""></image>
			</view>
		<!-- 右侧二三级分类 -->	
			<view class="categoryArea" v-for="(c1,index) in currentCateList.second" :key="c1.classifyId" >
				<view class="secondTitle">{{c1.classifyName}}</view>
				<view class="thirdList">
					<view class="thirdItem" v-for="(c2,index) in c1.third" :key="c2.classifyId"  >
						<image class="thirdImg" :src="c2.image" ></image>
						<view class="thirdText">{{c2.classifyName}}</view>
						
					</view>
					
					</view>
				</view>
						
			</view>
			
		</view>
			
			
		</view>
	
		
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				currentIndex:0  //参考值思想解决navlist点击切换
			}
		},
		mounted() {
			this.getCategoryList()
		},
		methods: {
			getCategoryList(){
				this.$store.dispatch('category/getCategoryList')
			}
		},
		computed:{
			...mapState('category',['categoryList']),
			currentCateList(){
				return this.categoryList[this.currentIndex] || {}
			}
		}
	}
</script>

<style lang="stylus">
	.categoryContainer
		height: 100%
		position: relative
		.searchBar
			position: fixed
			top: 0
			left:0
			right: 0
			bottom: 0
			z-index: 2000
			height: 100upx
			padding:20upx		
			border-bottom: 2upx solid #b3b3b3
			background-color: #fff
			box-sizing: border-box
		 
			.innerBar
				position: relative
				background-color: #f5f5f5
				border-radius: 20upx
				height: 64upx
				line-height: 42upx
				padding: 0 20upx
				.icon-sousuo
					position: absolute
					top: 20%
					width: 46upx
					height: 46upx
					vertical-align: middle
				.content
					position: absolute
					top: 20%
					padding-left: 60upx
					font-size: 28upx
					color:#b3b3b3
		.main
			position:relative
			top: 100upx
			height: 100%
			.leftnav
				position:fixed
				top: 100upx
				left:0
				width:140upx
				height: 100%
				padding: 60upx 12upx 0
				border-right: 2upx solid #b3b3b3
				box-sizing: border-box
				.navItem
					width: 100%
					padding: 0 8upx
					box-sizing: border-box
					height: 80upx
					font-size: 25upx
					line-height: 80upx
					text-align: center
					&.active
						background-color: #f6ebea
						color: #d44d44
						border-radius: 20upx						
						height: 60upx
						line-height: 60upx		
						
			.rightWrap
				position:absolute
				top: 0
				left:142upx
				width:calc(100vw - 142upx)
				height: 100%
				.bannerWrap
					width: 100%
					height: 280upx
					padding: 38upx 25upx
					box-sizing: border-box
					display: flex
					justify-content: center
					align-items: center
					.bannerImg
						width: 540upx
						height: 200upx
						border-radius: 20upx
				.categoryArea
					width: 100%
					border-top: 2upx solid #b3b3b3
					.secondTitle
						height: 116upx
						line-height: 116upx
						margin-left: 40upx
						font-size: 34upx
						font-weight: 700
					.thirdList
						width: 100%
						display: flex
						justify-content: flex-start
						flex-wrap: wrap
										
						.thirdItem
							width: 33.333333%
							height: 220upx
							display: flex
							flex-direction: column
							align-items: center
							padding: 0 8upx
							box-sizing: border-box
							margin-bottom: 30upx
							.thirdImg
								width: 170upx
								height: 170upx
								border-radius: 20upx
							.thirdText
								margin-top: 10upx
								font-size: 24upx
					
						
					
				
				

</style>
